<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="tabsObj.active" @tab-change="handleTabsClick">
      <el-tab-pane
        v-for="(item, index) in tabsObj.list"
        :key="item.key"
        :label="item.label"
        :name="item.key"
      >
      </el-tab-pane>
    </el-tabs>
    <el-row mb-20px :gutter="20">
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代收成功金额</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.ds_total_success }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代收商户手续费</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.ds_total_fee }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代收码商分成</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.ds_total_ms_profit }}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row mb-20px :gutter="20">
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代收代理分成</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.ds_total_dl_profit }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代收平台利润</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.ds_profit }}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-divider border-style="dashed" />
    <el-row mb-20px :gutter="20">
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代付成功金额</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.df_total_dl_profit }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="width: 100%">
          <template #header>
            <div flex flex-justify-between font-size-14px class="card-header">
              <span>代付商户手续费</span>
              <el-tag type="success" effect="dark">统计</el-tag>
            </div>
          </template>
          <p class="font-size-[22px] c-[#666] mt-0 mb-0">{{ displayData.df_total_fee }}</p>
        </el-card>
      </el-col>
    </el-row>
    </el-card>
    
  </div>
</template>

<script lang="ts" setup>
import type { TabsPaneContext } from "element-plus";
import { board } from "@/api/other/board";

const tabsObj = ref<{ active: string; list: { key: string; label: string }[] }>({
  active: "1",
  list: [
    {
      key: "1",
      label: "今日",
    },
    {
      key: "2",
      label: "昨日",
    },
    {
      key: "3",
      label: "本周",
    },
  ],
});

const displayData = ref<any>({
  df_amount: 0,
  df_in: 0,
  platform_in: 0,
  platform_in_user: 0,
  todayMsAgentIn: 0,
  todaydayOrders: 0,
  total_money: 0,
});

const handleTabsClick = (name = tabsObj.value.list[0].key) => {
  tabsObj.value.active = name ;

  //访问网络
  // displayData = ...

  board({ time_period: tabsObj.value.active })
      .then((res) => {
        displayData.value = res;
      })
      .finally(() => {
        // loading.value = false;
      });
};

handleTabsClick();


</script>

<style lang="scss" scoped>
</style>
